<template>
  <div id="app">
      <div class="event">
          <div class="content">
            <Child :title="msg" @child-click='handlerChildClick'></Child>
          <div>
           <ToDoList @add-list='addList' @remove-all='removeAll'/>
            <div class="box">
              <ul v-for="(item,index) in listData" :key="index">
                  <li>{{index+1}} -- {{item}}</li>
              </ul>
            </div>
      </div> 
      </div> 
      </div>
      
  </div>
</template>

<script>
import Child from '@/views/event/components/Child.vue'
import ToDoList from '@/views/event/components/ToDoList.vue'
import {ref} from 'vue'
export default {
    components:{Child,ToDoList},
    setup(){
        const msg = ref('我是父组件的值')
        const listData = ref([])

        const handlerChildClick = msg =>{
            alert(msg)
        }

        // 添加数据
        const addList = value=>{
            // console.log(value);
            listData.value.push(value)
        }

        // 重置清单
        const removeAll = ()=>{
            listData.value=[]
        }

        return{
            msg,
            listData,
            handlerChildClick,
            addList,
            removeAll
        }
    }
}
</script>

<style scoped>
*{
    padding: 0;
    margin: 0;
}
#app{
    width: 100%;
    height: 100vh;
}
.event{
    width: 400px;
    /* height: 100vh; */
    margin: 0 auto;
}
.box{
    height: 400px;
    width: 400px;
    background: yellow;
}
</style>